@mixin hoverDate {
  @apply bg-theme text-white;
}

.calendar {
  @apply rounded-lg pl-4 bg-bg33;
  width: 21.5rem;
  padding-bottom: 0.875rem;

  .operationArea {
    @apply w-full h-12 flex items-center justify-between;

    .iconBox {
      @apply flex items-center w-9 h-9 cursor-pointer;

      &:hover .icon {
        @apply opacity-100;
      }

      .icon {
        @apply ml-2 block relative h-3 opacity-60;
        width: 0.4375rem;
      }

      .iconRight {
        @apply mr-4;
        transform: rotate(180deg);
      }
    }

    .time {
      @apply text-white text-lg;
    }
  }

  .weeks {
    @apply flex h-9;

    .weeksItem {
      @apply text-xs w-9 h-9 text-center leading-9 text-c99;
    }
  }

  .dateBox {
    @apply flex flex-wrap;

    .dateItem {
      @apply w-9 h-9 text-center text-base rounded leading-9 text-c99;
      margin-right: 0.625rem;

      &.dateItemActive {
        @include hoverDate;
      }

      &.isDateActive {
        @apply text-white;

        &:hover {
          @apply cursor-pointer;
          @include hoverDate;
        }
      }
    }
  }
}
